<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素属性使用(use element attributes)</title>
  <!-- 
  在 JavaScript 中，元素属性（element attributes）是指 HTML 元素的特征或设置。这些属性可以用来定义元素的行为、样式、标识等。
  
  1. 获取和设置属性
  - 获取属性：可以使用  `getAttribute()`  方法来获取元素的属性值。
    const element = document.getElementById('myElement');
    const value = element.getAttribute('data-custom'); // 获取自定义属性
  - 设置属性：使用  `setAttribute()`  方法来设置元素的属性值。
    element.setAttribute('data-custom', 'newValue'); // 设置自定义属性

  2. 常用的属性
  - id：元素的唯一标识符。
  - class：元素的类名，用于样式和选择器。
  - style：元素的内联样式。
  - src：用于  `<img>` 、 `<script>`  等元素，指定资源的路径。
  - href：用于  `<a>`  元素，指定链接的目标地址。

  3. 读取和修改属性
  除了  `getAttribute()`  和  `setAttribute()` ，还可以直接通过 DOM 属性来读取和修改某些常用属性。例如：
    element.id = 'newId'; // 修改 id
    element.className = 'newClass'; // 修改 class
    element.style.color = 'red'; // 修改内联样式

  4. 删除属性
  使用  `removeAttribute()`  方法可以删除元素的属性。
  element.removeAttribute('data-custom'); // 删除自定义属性

  5. 自定义属性
  HTML5 允许使用自定义属性，这些属性以  `data-`  开头。可以使用 JavaScript 的  `dataset`  属性来访问这些自定义属性。
    const customValue = element.dataset.custom; // 获取自定义属性
    element.dataset.custom = 'newValue'; // 设置自定义属性

  6. 注意事项
  - 属性名是区分大小写的。
  - 某些属性（如  `class`  和  `for` ）在 JavaScript 中有特殊的表示法（如  `className`  和  `htmlFor` ）。
  - 在操作 DOM 属性时，尽量使用  `setAttribute()`  和  `getAttribute()`  方法，以确保兼容性和可读性。
   -->
</head>
<body>

  <h3>1.属性特征</h3>
  <div id="attribute-id" class="attribute-class" title="attribute-title" data-custom="attribute-custom" age="19">attribute-div</div>

  <input type="checkbox" id="attribute-checkbox" checked="checked" />

  <script>
    // 1. 获取属性
    const element = document.getElementById('attribute-id');
    const inputEl = document.querySelector("input")
    const id = element.id;
    const className = element.className;
    const title = element.title;
    const custom = element.getAttribute('data-custom');

    console.log(inputEl.getAttribute("checked"));
    
    console.log("1. 获取属性", id); // attribute-id
    console.log("1. 获取属性", className); // attribute-class
    console.log("1. 获取属性", title); // attribute-title
    console.log("1. 获取属性", custom); // attribute-custom

    console.log("1. 获取属性", element.hasAttribute('age'), element.hasAttribute('AGE')); // true true
    console.log("1. 获取属性", element.hasAttribute('19'), element.hasAttribute('id')); // false true

    console.log("1. 获取属性", element.getAttribute('age'), element.getAttribute('AGE')); // 19 19
    console.log("1. 获取属性", element.getAttribute('19'), element.getAttribute('id')); // null attribute-id
    
    // 2. 设置属性
    // 2.1
    element.id = 'new-id';
    element.className = 'new-class';
    element.title = 'new-title';

    console.log("2.1 设置属性", element.id); // new-id
    console.log("2.1 设置属性", element.className); // new-class
    console.log("2.1 设置属性", element.title); // new-title

    // 2.2
    element.setAttribute('data-custom', 'new-custom');
    console.log("2.2 设置属性", element.getAttribute('data-custom')); // new-custom
    
    // 3. 删除属性
    element.removeAttribute('data-custom');
    console.log("3. 删除属性", element.getAttribute('data-custom')); // null
  </script>
  
</body>
</html>